<template>
  <div>
    <view class="card">
      <!--内容栏-->
      <view hidden='true' :name="myData.questionId">{{myData.questionId}}</view>
      <l-card l-class="card0" type="avatar" position="right" :image="myData.avatarUrl" :title="myData.nickName" :describe="myData.date">
        <!--此处为content-->
        <view class="avatar-content-question">
          {{myData.title}}
        </view>
        <view class="avatar-content">
          {{myData.content}}
        </view>

        <view class="avter-share-container">
          <view class="like-container">
            <l-icon name="like" color="#666" size="28" />
            <view class="number">{{myData.likesNum}}喜欢</view>
          </view>
          <view class="like-container">
            <l-icon name="default" color="#666" size="28" />
            <view class="number">{{myData.answersNum}}评论</view>
          </view>
        </view>
      </l-card>
    </view>

    <l-card l-class="card0" type="primary" position="right" plaintext="true">
      <view class='space'></view>
      <view class="positiveSide"><l-icon name="user" size='50' l-class="space1"/>
        正方观点：{{myData.positiveView}}
      </view>
      <view class='space'></view>
      <view class="negativeSide"><l-icon name="user" size='50' l-class="space1" color='red'/>
        反方观点：{{myData.negativeView}}
      </view>
    </l-card>

    <view class='space'></view>

    <l-notice-bar show="true" type="roll" speed="1500" front-icon-name="notification" end-icon-name="close" close="true">那么你的选择是？(别轻易真香哦)</l-notice-bar>

    <view class="grid0">
      <l-grid l-class="grid-item" show-border="true">
        <l-grid-item key="one" slot="one">
          <view class='margin0'>
            <l-icon name="user" size='80'/>
          </view>
          <l-button l-class="button0" @lintap="toQuestionDetail" data-my-view="T" shape="semicircle">正方</l-button>
          <l-dialog/>
        </l-grid-item>
        <l-grid-item key="two" slot="two">
          <view class='margin0'>
            <l-icon name="eye" size='80' color='gray'/>
          </view>
          <l-button l-class="button1" data-my-view="Y">游客</l-button>
          <l-dialog/>
        </l-grid-item>
        <l-grid-item key="three" slot="three">
          <view class='margin0'>
            <l-icon name="user" size='80' color='red'/>
          </view>
          <l-button l-class="button2" @lintap="toQuestionDetail" shape="semicircle" data-my-view="F">反方</l-button>
          <l-dialog/>
        </l-grid-item>
      </l-grid>
    </view>
  </div>
</template>

<script>
  export default {
    name: 'SelStandPoint',
    data () {
      return {
        myData: {},
        qId: 0,
        msg: {}
      }
    },
    methods: {
      toQuestionDetail (res) {
        console.log(res)
        console.log('======++++++++')
        console.log(this.qId)
        let that = this
        if (res.currentTarget.dataset.myView === 'T') {
          wx.lin.showDialog({
            type: 'confirm',
            title: '立场选择',
            content: '您确定选择正方吗？',
            success: (res) => {
              if (res.confirm) {
                wx.request({
                  url: 'http://47.94.166.187:8080/miniProgram/addMyPosition?questionId=' + that.qId,
                  data: {
                    token: wx.getStorageSync('token'),
                    position: 1,
                    targetId: that.qId
                  },
                  success (res) {
                    console.log('我成功选择了我的正观点。')
                  }
                })
                wx.redirectTo({
                  url: '/pages/positiveSide?questionId=' + that.qId
                })
              } else if (res.cancel) {
                console.log('点击取消')
              }
            }
          })
        }

        if (res.currentTarget.dataset.myView === 'Y') {
          wx.lin.showDialog({
            type: 'confirm',
            title: '立场选择',
            content: '您确定只是看看吗？',
            success: (res) => {
              if (res.confirm) {
                wx.request({
                  url: 'http://47.94.166.187:8080/miniProgram/addMyPosition',
                  data: {
                    token: wx.getStorageSync('token'),
                    position: 3,
                    targetId: that.qId
                  },
                  success (res) {
                    console.log('我成功选择了我是游客。')
                  }
                })
                wx.redirectTo({
                  url: '/pages/positiveSide?questionId=' + that.data.qId
                })
              } else if (res.cancel) {
                console.log('点击取消')
              }
            }
          })
        }

        if (res.currentTarget.dataset.myView === 'F') {
          console.log('=====123=====')
          console.log(that.qId)
          wx.lin.showDialog({
            type: 'confirm',
            title: '立场选择',
            content: '您确定选择反方吗？',
            success: (res) => {
              if (res.confirm) {
                wx.request({
                  url: 'http://47.94.166.187:8080/miniProgram/addMyPosition',
                  data: {
                    token: wx.getStorageSync('token'),
                    position: 2,
                    targetId: that.qId
                  },
                  success (res) {
                    console.log('我成功选择了反方观点。')
                  }
                })
                wx.redirectTo({
                  url: '/pages/negativeSide?questionId=' + that.qId
                })
              } else if (res.cancel) {
                console.log('点击取消')
              }
            }
          })
        }
      }
    },
    onLoad (options) {
      console.log(options.questionId)
      this.qId = options.questionId
      console.log(this.qId)
      var that = this
      var questionId = options.questionId
      console.log('----------------+------------------')
      wx.request({
        url: 'http://47.94.166.187:8080/miniProgram/ChooseMyPosition',
        data: {
          targetId: questionId,
          token: wx.getStorageSync('token')
        },
        success (res) {
          console.log('----------------+++------------------')
          console.log(res)
          that.myData = res.data.object
          that.msg = res.data.msg
          if (res.data.msg === 0) {
            wx.request({
              url: 'http://47.94.166.187:8080/miniProgram/questionDetail',
              data: {
                token: wx.getStorageSync('token'),
                targetId: that.qId
              },
              success (res) {
                console.log('--------------------------------------')
                console.log(res)
                if (res.data.object.position === 1 || res.data.object.position === 4) {
                  console.log('我的立场是正方')
                  wx.redirectTo({
                    url: '/pages/positiveSide?questionId=' + res.data.object.questionId
                  })
                } else if (res.data.object.position === 2 || res.data.object.position === 5) {
                  console.log('我的立场是反方')
                  wx.redirectTo({
                    url: '/pages/negativeSide?questionId=' + res.data.object.questionId
                  })
                }
              }
            })
          } else {
            wx.hideLoading()
          }
        }
      })
    }
  }
</script>

<style>
  .card {
    margin-bottom: 20rpx;
  }
  .card0{
    border-radius: .3rem !important;
  }
  .avatar-content-question {
    font-size: 35rpx;
    margin-bottom: 10rpx;
    font-weight: bold;
    text-align: center;
  }

  .avter-share-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

  .avatar-content {
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    font-size: 28rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
  }

  .like-container {
    display: flex;
    margin-right: 18rpx;
  }

  .number {
    font-size: 26rpx;
    margin-left: 4rpx;
  }

  .positiveSide {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 28rpx;
    color: #6495ed;
  }

  .negativeSide {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 28rpx;
    color: red;
  }

  .question {
    position: fixed;
    text-align: center;
    left: 0;
    right: 0;
  }

  .num {
    font-size: 20px;
  }

  .text {
    font-size: 20px;
  }

  .grid0 {
    height: 400rpx;
  }

  .grid-item {
    height: 200px;
    width: 100px;
  }

  .PositiveSide {
    height: 200px;
    width: 200px;
  }

  .margin0 {
    margin-bottom: 40rpx;
  }

  .button1 {
    background-color: gray !important;
  }

  .button2 {
    background-color: #f00 !important;
  }

  .space {
    margin-top: 30rpx;
  }

  .space1 {
    margin-right: 15rpx;
  }

</style>
